<template>
	<div class="page-container index-container">
		<div class="m-mainBox">
			<div class="gen-row clearfix">
                <div class="mainTab clearfix">
                    <div class="activeBg" ref="activeBg"></div>
                    <div :class="['tab',{'activ':index==activeTab}]" v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">{{item}}</div>
                </div>
            </div>
			<div class="u-cardBox card">
				<el-form ref="form" :model="form" :label-position="'left'" label-width="120px">
					<el-form-item label="年度" v-if="activeTab==0 || activeTab==1">
						<el-select v-model="form.year" class="item" placeholder="请选择年度">
							<el-option v-for="(item,index) in yearList" :key="'year'+index" :label="item" :value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="年级" v-if="activeTab==0">
						<el-select v-model="form.grade" class="item" placeholder="请选择年级">
							<el-option v-for="(item,index) in gradeList" :key="'grade'+index" :label="item" :value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="学校" v-if="activeTab==1|| activeTab==2">
						<el-select v-model="form.name" class="item" placeholder="请选择学校">
							<el-option v-for="(item,index) in schoolList" :key="'school'+index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班级" v-if="activeTab==2">
						<el-select v-model="form.school" class="item" placeholder="请选择班级">
							<el-option v-for="(item,index) in classList" :key="'class'+index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="考试">
						<el-select v-model="form.test" class="item" placeholder="请选择考试">
						<el-option v-for="(item,index) in testList"
							:key="'test'+index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="选择报告类型">
						<el-radio-group v-model="form.type" class="box1">
							<el-radio :label="item.label" name="type" v-for="(item,index) in typeList" :key="'r'+index">
								<template v-if="item.value == 2">
									<label>{{item.label}}</label>
									<div class="itemBox">
										<el-radio :label="ele.label" name="type" v-for="(ele,index) in item.testList" :key="'rtest'+index"></el-radio>
									</div>
								</template>
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
				<div class="hrStyle"></div>
				<div class="btns">
					<div class="btn left" @click="preview">预览报告</div>
					<div class="btn right">下载报告</div>
				</div>
			</div>
			<!-- 预览图 -->
			<!-- mask -->
			<div class="maskStyle" v-if="isShow" @click="isShow=false"></div>
			<div class="dialog" v-if="isShow">
				<div class="topTitle">报告</div>
				<div class="scrollBox cusMiniScroll">
				<div class="content">
					<div class="" v-for="(item,index) in imgList">
						<img :src="item.url">
						<!-- <img src='../../assets/img/qj/1.jpg'> -->
					</div>
				</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tabList:["区报告","学校报告","班级报告","学生报告"],
			activeTab:0,
			maxpage:0,
			perImg:'',

		switchIndex: "1",
		isShow: false,
		yearList:['2017','2018','2019','2020'],
		gradeList:['一年级','二年级','三年级','四年级','五年级','六年级'],
		testList: [
			{
				value: "1",
				label: "语文水平测试"
			},
			{
				value: "2",
				label: "数学水平测试"
			},
			{
				value: "3",
				label: "英语水平测试"
			},
			{
				value: "4",
				label: "2020五年级期末考试"
			},
			{
				value: "5",
				label: "2020六年级期末考试"
			}
		],
		schoolList: [
			{
				value: "0",
				label: "龙峰国际小学"
			},
			{
				value: "1",
				label: "义鹏第一小学"
			},
			{
				value: "2",
				label: "天音幸福小学"
			},
			{
				value: "3",
				label: "金沙湖东方校区"
			},
			{
				value: "4",
				label: "启明中学"
			},
			{
				value: "5",
				label: "明珠小学"
			}
		],
		classList:[
			{
				value: "1",
				label: "六（1）班"
			},
			{
				value: "2",
				label: "六（2）班"
			},
			{
				value: "3",
				label: "六（3）班"
			},
			{
				value: "4",
				label: "五（1）班"
			},
			{
				value: "5",
				label: "五（2）班"
			},
			{
				value: "6",
				label: "五（3）班"
			},
			{
				value: "7",
				label: "四（1）班"
			},
			{
				value: "8",
				label: "四（2）班"
			},
			{
				value: "9",
				label: "四（3）班"
			},
			{
				value: "10",
				label: "三（1）班"
			},
			{
				value: "11",
				label: "三（2）班"
			},
			{
				value: "12",
				label: "三（3）班"
			},
			{
				value: "13",
				label: "二（1）班"
			},
			{
				value: "14",
				label: "二（2）班"
			},
			{
				value: "15",
				label: "二（3）班"
			},{
				value: "16",
				label: "一（1）班"
			},
			{
				value: "17",
				label: "一（2）班"
			},
			{
				value: "18",
				label: "一（3）班"
			},
		],
		typeList: [
			{
				label: "总分报告",
				value: "1"
			},
			{
				label: "学科报告",
				value: "2",
				testList: [
					{
						label: "数学",
						value: "1"
					},
					{
						label: "语文",
						value: "2"
					},
					{
						label: "英语",
						value: "3"
					},
					{
						label: "科学",
						value: "4"
					}
				]
			},
			{
				label: "整体报告",
				value: "3"
			}
		],

		form: {
			year: "",
			name: "",
			school: "",
			test: "",
			type: ""
		},
		imgqj:[
			{url:require('../../assets/img/qj/0.jpg'),id:1},
			{url:require('../../assets/img/qj/1.jpg'),id:2},
			{url:require('../../assets/img/qj/2.jpg'),id:3},
			{url:require('../../assets/img/qj/3.jpg'),id:3},
			{url:require('../../assets/img/qj/4.jpg'),id:3},
			{url:require('../../assets/img/qj/5.jpg'),id:3},
			{url:require('../../assets/img/qj/6.jpg'),id:3},
			{url:require('../../assets/img/qj/7.jpg'),id:3},
			{url:require('../../assets/img/qj/8.jpg'),id:3},
			{url:require('../../assets/img/qj/9.jpg'),id:3},
			{url:require('../../assets/img/qj/10.jpg'),id:3},
			{url:require('../../assets/img/qj/11.jpg'),id:3},
			{url:require('../../assets/img/qj/12.jpg'),id:3},
			{url:require('../../assets/img/qj/13.jpg'),id:3},
			{url:require('../../assets/img/qj/14.jpg'),id:3},
			{url:require('../../assets/img/qj/15.jpg'),id:3},
			{url:require('../../assets/img/qj/16.jpg'),id:3},
			{url:require('../../assets/img/qj/17.jpg'),id:3},
		],
		imgxj:[
			{url:require('../../assets/img/xj/0.jpg'),id:1},
			{url:require('../../assets/img/xj/1.jpg'),id:2},
			{url:require('../../assets/img/xj/2.jpg'),id:3},
			{url:require('../../assets/img/xj/3.jpg'),id:3},
			{url:require('../../assets/img/xj/4.jpg'),id:3},
			{url:require('../../assets/img/xj/5.jpg'),id:3},
			{url:require('../../assets/img/xj/6.jpg'),id:3},
			{url:require('../../assets/img/xj/7.jpg'),id:3},
			{url:require('../../assets/img/xj/8.jpg'),id:3},
			{url:require('../../assets/img/xj/9.jpg'),id:3},
			{url:require('../../assets/img/xj/10.jpg'),id:3},
			{url:require('../../assets/img/xj/11.jpg'),id:3},
			{url:require('../../assets/img/xj/12.jpg'),id:3},
			{url:require('../../assets/img/xj/13.jpg'),id:3},
			{url:require('../../assets/img/xj/14.jpg'),id:3},
			{url:require('../../assets/img/xj/15.jpg'),id:3},
			{url:require('../../assets/img/xj/16.jpg'),id:3},
			{url:require('../../assets/img/xj/17.jpg'),id:3},
			{url:require('../../assets/img/xj/18.jpg'),id:3},
			{url:require('../../assets/img/xj/19.jpg'),id:3},
			{url:require('../../assets/img/xj/20.jpg'),id:3},
		],
		imgbj:[
			{url:require('../../assets/img/bj/0.jpg'),id:1},
			{url:require('../../assets/img/bj/1.jpg'),id:2},
			{url:require('../../assets/img/bj/2.jpg'),id:3},
			{url:require('../../assets/img/bj/3.jpg'),id:3},
			{url:require('../../assets/img/bj/4.jpg'),id:3},
			{url:require('../../assets/img/bj/5.jpg'),id:3},
			{url:require('../../assets/img/bj/6.jpg'),id:3},
			{url:require('../../assets/img/bj/7.jpg'),id:3},
			{url:require('../../assets/img/bj/8.jpg'),id:3},
			{url:require('../../assets/img/bj/9.jpg'),id:3},
			{url:require('../../assets/img/bj/10.jpg'),id:3},
			{url:require('../../assets/img/bj/11.jpg'),id:3},
			{url:require('../../assets/img/bj/12.jpg'),id:3},
			{url:require('../../assets/img/bj/13.jpg'),id:3},
			{url:require('../../assets/img/bj/14.jpg'),id:3},
			{url:require('../../assets/img/bj/15.jpg'),id:3},
			{url:require('../../assets/img/bj/16.jpg'),id:3},
			{url:require('../../assets/img/bj/17.jpg'),id:3},
			{url:require('../../assets/img/bj/18.jpg'),id:3},
			{url:require('../../assets/img/bj/19.jpg'),id:3},
			{url:require('../../assets/img/bj/20.jpg'),id:3},
			{url:require('../../assets/img/bj/21.jpg'),id:1},
			{url:require('../../assets/img/bj/22.jpg'),id:2},
			{url:require('../../assets/img/bj/23.jpg'),id:3},
			{url:require('../../assets/img/bj/24.jpg'),id:3},
			{url:require('../../assets/img/bj/25.jpg'),id:3},
			{url:require('../../assets/img/bj/26.jpg'),id:3},
			{url:require('../../assets/img/bj/27.jpg'),id:3},
			{url:require('../../assets/img/bj/28.jpg'),id:3},
			{url:require('../../assets/img/bj/29.jpg'),id:3},
			{url:require('../../assets/img/bj/30.jpg'),id:3},
			{url:require('../../assets/img/bj/31.jpg'),id:3},
			{url:require('../../assets/img/bj/32.jpg'),id:3},
			{url:require('../../assets/img/bj/33.jpg'),id:3},
			{url:require('../../assets/img/bj/34.jpg'),id:3},
			{url:require('../../assets/img/bj/35.jpg'),id:3},
			{url:require('../../assets/img/bj/36.jpg'),id:3},
			{url:require('../../assets/img/bj/37.jpg'),id:3},
			{url:require('../../assets/img/bj/38.jpg'),id:3},
			{url:require('../../assets/img/bj/39.jpg'),id:3},
			{url:require('../../assets/img/bj/40.jpg'),id:3},
			{url:require('../../assets/img/bj/41.jpg'),id:3},
			{url:require('../../assets/img/bj/42.jpg'),id:3},
			{url:require('../../assets/img/bj/43.jpg'),id:3},
			{url:require('../../assets/img/bj/44.jpg'),id:3},
		],
		imgList:[],


		};
	},
	watch: {
		//  searchPar:{
		//     deep:true,
		//     handler:function (newVal,oldVal) {
		//     }
		//  }
	},
	mounted(){
		this.changeTab(0);
	},
	methods: {
		preview() {
		this.isShow = true;
		},
		
        changeTab(index){
			if(index==0){
				this.maxpage = 18;
				this.perImg = 'qj'
				this.imgList = this.imgqj
			}else if(index==1){
				this.maxpage = 21;
				this.perImg = 'xj'
				this.imgList = this.imgxj
			}else if(index==2){
				this.maxpage = 45;
				this.perImg = 'bj'
				this.imgList = this.imgbj
			}else{
				this.maxpage = 18;
				this.perImg = 'xx'
				this.imgList = []
			}
            this.activeTab = index;
            this.$refs['activeBg'].style.left = (index*150) + "px";
        },

	}
};
</script>

<style lang="scss" scoped>
.m-mainBox /deep/ {
	position: relative;
	.u-cardBox{
		box-shadow: 0 0 10px rgba(59, 100, 168, 0.1);
	}
	.el-breadcrumb {
		font-size: 16px;
		color: #747e93;
	}
	.u-tabs-button {
		margin-top: 30px;
		display: block;
	}
	.u-button {
		border-radius: 0px;
		margin: 0;
		min-width: 170px;
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		color: #747e93;
		font-weight: bold;
		border-right: 0;
	}
	.u-button:last-child {
		border-right: 1px solid #dbdee5;
	}
	.activeStyle {
		width: 160px;
		height: 48px;
		background: #3964f9;
		box-shadow: 0px 2px 4px rgba(57, 100, 249, 0.4);
		border: 1px solid #3964f9;
		opacity: 1;
		color: #fff;
		border-radius: 5px;
	}
	.el-select {
		width: 300px;
		height: 40px;
	}

	.el-form-item__label {
		font-size: 16px;
		color: #747e93;
	}

	.el-radio__input.is-checked + .el-radio__label {
		font-size: 16px;
		color: #3964f9;
	}
	.el-radio__input.is-checked .el-radio__inner {
		border-color: #3964f9;
		background: #3964f9;
	}
	.el-radio__label {
		font-size: 16px;
		color: #333333;
	}
	.u-button:first-child {
		border-radius: 5px 0 0 5px;
	}
	.u-button:last-child {
		border-radius: 0 5px 5px 0;
	}

	.card {
		margin-top: 20px;
		width: 100%;
		min-width: 600px;
		height: auto;
	}
	.box1 {
		margin-top: 15px;
		.el-radio {
		display: block;
		height: 48px;
		}

		.lable {
		margin-top: -3px;
		display: block;
		}
		.el-radio:nth-child(2) {
		display: flex;
		height: 96px;
		.itemBox {
			display: flex;
			padding: 0px 40px;
			margin: 20px 0;
			background-color: #f7f7fa;
			border-radius: 4px;
			height: 40px;
			width: 480px;
			line-height: 40px;
			.el-radio {
			display: block;
			height: 40px;
			line-height: 40px;
			}
		}
		}
	}
	.hrStyle {
		width: 100%;
		height: 1px;
		background: #f7f7fa;
		opacity: 1;
	}
	.btns {
		height: 56px;
		width: 100%;
		text-align: center;
		margin-top: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 140px;
	}
	.btn {
		width: 140px;
		height: 56px;
		background: #00cd86;
		box-shadow: 0px 6px 20px rgba(0, 205, 134, 0.3);
		opacity: 1;
		border-radius: 28px;
		color: #fff;
		font-size: 20px;
		line-height: 56px;
		cursor: pointer;
	}
	.right {
		width: 140px;
		height: 56px;
		background: #3964f9;
		box-shadow: 0px 6px 30px rgba(57, 100, 249, 0.3);
		opacity: 1;
		border-radius: 28px;
		margin-left: 60px;
	}
}
.maskStyle {
	position: fixed;
	z-index: 10;
	right: 0;
	top: 60px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	animation: showCss ease 0.5s;
}
@keyframes showCss {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.dialog {
	width: 70%;
	height: 100%;
	position: fixed;
	top: 60px;
	right: 0%;
	background: #fff;
	animation: fadeInLeft ease-out 0.5s;
	z-index: 99999;

	.topTitle {
		width: 100%;
		height: 50px;
		line-height: 50px;
		color: #333333;
		font-size: 18px;
		font-weight: bold;
		border-bottom: 1px solid #f7f7fa;
		// margin-bottom: 40px;
		padding-left: 40px;
	}
	.scrollBox {
		height: 100%;
		padding-top: 40px;
		overflow: scroll;
		.content {
		width: 90%;
		margin: 0 40px;
		min-height: 100%;
		height: auto;
		overflow: auto;
		background: rgba(0, 0, 0, 0);
		box-shadow: 0px 6px 15px #e7e8eb;
		opacity: 1;
		img {
			width: 100%;
			height: 100%;
			border: 0;
			vertical-align: bottom;
		}
		}
	}
}
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		right: -70%;
		-webkit-transform: translate3d(0%, 0, 0);
		transform: translate3d(0%, 0, 0);
	}
	50% {
		opacity: 0;
		right: -30%;
		-webkit-transform: translate3d(0%, 0, 0);
		transform: translate3d(0%, 0, 0);
	}
	100% {
		opacity: 1;
		right: 0%;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		right: -70%;
		-webkit-transform: translate3d(0%, 0, 0);
		transform: translate3d(0%, 0, 0);
	}
	50% {
		opacity: 0;
		right: -30%;
		-webkit-transform: translate3d(0%, 0, 0);
		transform: translate3d(0%, 0, 0);
	}
	100% {
		opacity: 1;
		right: 0%;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
</style>